{{template "component/base.html" .}}
{{define "head"}}
<title>Set Up</title>
<style>
  body {
    background: url(/static/img/base.jpg) no-repeat center fixed;
    background-size: cover;
  }

  #signinform {
    background-color: white;
    opacity: 0.8;
    padding: 5%;
    margin-top: 5%;
  }
</style>
{{end}}

{{define "body"}}

<div class="container">
  <div class="col-md-12" id="signinform">
    {{if .Error}}
    <div class="alert alert-danger alert-dismissible fade show">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      {{.flash.error}}
    </div>
    {{end}}
    {{if .Notice}}
    <div class="alert alert-success alert-dismissible fade show">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      {{.flash.notice}}
    </div>
    {{end}}
    <h3 style="text-align: center;">安装</h3>
    <br>
    <form action="/setup" method="POST">
      {{ .xsrfdata }}
      <div class="form-group">
        <label for="gamename">比赛名:</label>
        <input name="gamename" required placeholder="请输入比赛名" autocomplete="off" type="text" class="form-control"
          maxlength="30">
      </div>
      <div class="form-group">
        <label for="adminname">管理员用户名:</label>
        <input name="adminname" required placeholder="请输入管理员用户名" autocomplete="off" type="text" class="form-control"
          maxlength="30">
      </div>

      <div class="form-group">
        <label for="pwd">管理员密码:</label>
        <input type="password" name="password" required placeholder="请输入密码" autocomplete="off" class="form-control"
          maxlength="30" id="password" onblur="checkPass();">
      </div>

      <div class="form-group">
        <label for="pwd">确认密码:</label>
        <input type="password" name="veripassword" onblur="checkPass();" required placeholder="请再次输入密码"
          autocomplete="off" maxlength="30" class="form-control" id="password_check">
      </div>
      <div id="warning" style="color: red;"></div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" name="email" class="form-control" required autocomplete="off" placeholder="Enter email"
          maxlength="40">
      </div>
      <div class="form-group">
      <label for="sel1">请选择数据库:</label>
      <select class="form-control" id="sel1">
        <option>sqlite</option>
      </select>
      </div>
      <br>
      <div style="text-align: center;">
        <button type="submit" class="btn btn-primary">确定</button>
        <button type="reset" class="btn btn-dark">重置</button>
      </div>
    </form>
  </div>
</div>

<script>
  function checkPass() {
    if (document.getElementById("password").value !=
      document.getElementById("password_check").value) {
      document.getElementById("warning").innerHTML = "两次密码输入不一致";
    } else {
      document.getElementById("warning").innerHTML = "";
    }
  }
</script>
{{end}}